<template>
  <a-modal
    v-model:visible="visible"
    :title="title"
    :width="width >= 1200 ? 1200 : '100%'"
    :footer="false"
    :mask-closable="false"
    :esc-to-close="false"
    draggable
    :align-center="true"
    @close="close"
  >
    <div class="detail_content">
      <h1 class="title">{{ form?.title }}</h1>
      <div class="info">
        <a-space>
          <span>
            <icon-user class="icon" />
            <span class="label">创建人：</span>
            <span>{{ form?.createNickname }}</span>
          </span>
          <a-divider direction="vertical" />
          <span>
            <icon-schedule class="icon" />
            <span>创建时间：</span>
            <span>{{ form?.createTime }}</span>
          </span>
          <a-divider v-if="form?.issueNickname" direction="vertical" />
          <span v-if="form?.issueNickname">
            <icon-user class="icon" />
            <span class="label">发布人：</span>
            <span>{{ form?.issueNickname }}</span>
          </span>
          <a-divider v-if="form?.issueTime" direction="vertical" />
          <span v-if="form?.issueTime">
            <icon-history class="icon" />
            <span class="label">发布时间：</span>
            <span>{{ form?.issueTime }}</span>
          </span>
        </a-space>
      </div>
      <div style="flex: 1;">
        <AiEditor v-model="form.content" />
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { useWindowSize } from '@vueuse/core'
import AiEditor from './editor/show/index.vue'
import { getNotice } from '@/apis/system'
import { useResetReactive } from '@/hooks'

const emit = defineEmits<{
  (e: 'close-success', noticeId: string): void
}>()

const { width } = useWindowSize()

const noticeId = ref('')

const [form, resetForm] = useResetReactive({
  title: '',
  effectiveTime: '',
  createTime: '',
  createNickname: '',
  content: '',
  updateTime: '',
  issueTime: '',
  issueNickname: ''
})

const visible = ref(false)
const title = computed(() => ('详情'))
// 详情
const onDetail = async (id: string) => {
  noticeId.value = id
  visible.value = true
  resetForm()
  const { data } = await getNotice(id)
  Object.assign(form, data)
}

// 关闭
const close = () => {
  resetForm()
  emit('close-success', noticeId.value)
}

defineExpose({ onDetail })
</script>

<style scoped lang="scss">
.arco-link {
  color: rgb(var(--gray-8));
}

.icon {
  margin-right: 3px;
}

.update-time-row {
  text-align: right;
}

.detail_content {
  .title {
    text-align: center;
  }

  .info {
    text-align: center;
  }

  .icon {
    margin-right: 3px;
  }
}
</style>
